import React, { useEffect, useState } from "react";
import { useRecoilState } from "recoil";
import { designerState } from '../../store'
import { Empty, Tabs } from 'antd'
import { produce } from 'immer';

import RowSetting from "./layout/Row/config";
import CarouselSetting from "./public/Carousel/config";
import FooterSetting from "./custom/Footer/config";

const { TabPane } = Tabs;

export default function ComponentSetting() {
  const [pageData, setPageData] = useRecoilState(designerState.pageDataAtom);
  const [selectedNode, setSelectedNode] = useRecoilState(designerState.selectedNodeAtom);

  useEffect(() => {
    // 选中节点发生改变时，更新 pageData 中对应的节点，从而触发页面渲染
    var newPageData = produce(pageData, (draft: any) => {
      draft.forEach((item: any, i: number) => {
        if (item.meta.id === selectedNode.meta.id) {
          draft[i] = selectedNode;
        }
      });
    })

    setPageData(newPageData)
  }, [selectedNode])

  const renderComponent = (name: string) => {
    switch (name) {
      case "carousel":
        return <CarouselSetting />;
      case "row":
        return <RowSetting />;
      case "footer":
        return <FooterSetting />;
      default:
        return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
    }
  };

  if (selectedNode && selectedNode?.meta?.name) {
    // return <>{ renderComponent(selectedNode.meta.name.toLowerCase()) }</>
    const Component = selectedNode.meta.componentConfig
    return (<Component />)
  } else {
    return (
      <Tabs defaultActiveKey="2" className="default-setting">
        <TabPane tab='元数据' key="1">
          元数据内容
        </TabPane>
        <TabPane tab='设置' key="2">
          设置内容
        </TabPane>
        <TabPane tab='数据' key="3">
          数据内容
        </TabPane>
      </Tabs>
    )
  }
}